{% extends 'base.html' %}

{% block title %}{{ task.name }}{% endblock %}
{% block section %}task{% endblock %}

{% block extra-head %}
<link rel="stylesheet" type="text/css"  media="screen" href="{{ MEDIA_URL }}tasks/tasks.css" />
{% endblock %}

{% block content %}
<div class="span-5">
<div class="gradient-box">
    <h2>{{ task.name }}{% if constituency %} in {{ constituency.name }}{% endif %}</h2>
    <div class="project">task suggested by <a href='{{ task.project.url }}'>{{ task.project.name }}</a></div>
    
    <div class="description">
      {% autoescape off %}
        {{ task.description|urlize|linebreaks }}
      {% endautoescape %}
      {% if not constituency %}{% ifequal usertasks.count 1 %}{% else %}You are doing this task in more than one constituency{% endifequal %}{% endif %}
    </div>

    {% if usertasks %}
        {% for usertask in usertasks %}
        {% if usertask.constituency %}{% if not constituency %}<h4>In <a href='{% url task slug=task.slug,constituency=usertask.constituency.slug %}'>{{ usertask.constituency.name }}</a></h4>{% endif %}{% endif %}
        <div class="actions">
          {% for link in usertask.transition_links %}
            {{ link|safe }}
          {% endfor %}
        </div>
        {% endfor %}
    {% endif %}
</div>
    <h3>{{ started_users.count }} {% ifequal started_users.count 1 %}person{% else %}people{% endifequal %} currently doing this task{% if constituency %} in {{ constituency.name }}{% endif %}</h3>
    {% if started_users %}
    <ul class="taskusers">
    {% with started_users as users %}
        {% include "user_list.html" %}
    {% endwith %}
    {% endif %}
    </ul>

    <div class="quiet"><h3>How do tasks work?</h3>
    <p>When we or other organisations suggest a task that you can do we will send you an email. This email will contain links to either start the task, say you've completed the task, or to ignore the task. You can also do this by logging in and looking at the list of tasks on the tasks page, or the task currently displayed on the home page.</p>
    <p>We can tell when you've finished some tasks, but with others, you'll need to tell us when you've done it by clicking a "completed" button.</p>
    <p>When we know a task is completed, it means we can tell how much further there is to go across the whole country before it's finished.  It also means we can credit you for the work you've done.</p></div>
</div>
<div class="span-3 last">
<h3>Progress on this task</h3>
<div id="visualization">
</div>

{% block js %}
 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script type="text/javascript">
   google.load('visualization', '1', {packages: ['gauge']});
 </script>
 <script type="text/javascript">
 function drawVisualization() {
   // Create and populate the data table.
   var data = new google.visualization.DataTable();
   data.addColumn('string', 'Label');
   data.addColumn('number', 'Value');
   data.addRows(1);
   data.setValue(0, 0, '% complete');
   data.setValue(0, 1, {{ task.percent_complete }});

   // Create and draw the visualization.
   var chart = new google.visualization.Gauge(document.getElementById('visualization'));
   var opts = {redFrom: 90, 
               redTo: 100, 
               yellowFrom: 75,
               yellowTo: 90, 
               greenFrom: 35, 
               greenTo: 75};

    chart.draw(data, opts);
 }
 google.setOnLoadCallback(drawVisualization);
 </script>
{% endblock %}

</div>

{% endblock %}
